<!-- 脱敏字段管理 -->
<template>
	<div>
		<el-dialog v-model="open" title="原始数据详情" width="1200px" :close-on-click-modal="false" append-to-body center>
			<!-- 数据列表 -->
			<YdTable
				:formData="searchFormData"
				:tableConfig="tableConfig"
				:tableData="tableData.data"
				@sizeChangeHandler="handlerQuery"
				@currentChangeHandler="handlerQuery"
				@sortChangeHandler="handlerQuery"
				@selectionChangeHandler="handlerSelectionChange"
			>
			</YdTable>
		</el-dialog>

		<!-- 包体详情 -->
		<el-dialog v-model="detailOpen" title="包体详情" width="1000px" :close-on-click-modal="false" append-to-body>
			<el-row :gutter="10">
				<el-col :span="8">
					<el-input v-model="matching" placeholder="请输入正则表达式" />
				</el-col>
				<el-col :span="16">
					<el-button @click="checkSearch">搜索</el-button>
					<el-button @click="javaCheck">java校验</el-button>
					<el-button @click="probeCheck">探针校验</el-button>
				</el-col>
			</el-row>
			<br />
			<el-row :gutter="10">
				<el-col :span="12">
					<el-card shadow="hover">
						<template #header>
							<span>Java校验结果</span>
						</template>
						<el-input v-model="javaCheckRes" type="textarea" :rows="8" readonly></el-input>
					</el-card>
				</el-col>
				<el-col :span="12">
					<el-card shadow="hover">
						<template #header>
							<span>探针校验结果</span>
						</template>
						<el-input v-model="probeCheckRes" type="textarea" :rows="8" readonly></el-input>
					</el-card>
				</el-col>
			</el-row>
			<br />
			<el-row>
				<el-col :span="24">
					<el-card shadow="hover">
						<template #header>
							<span>包体信息(可替换内容后进行校验)</span>
							<div style="float: right">当前共查询到匹配值{{ matchingCount }}个</div>
						</template>
						<el-input v-model="detailData" type="textarea" :rows="12"></el-input>
					</el-card>
				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script setup name="OriDataDetail" lang="ts">
import { queryById, list, remove, download } from '@/api/management/IndicatorManage/proprietaryIndicatorManage/manage/originalDataDetail';
import { parseTime, downloadFromBlob } from '@/utils/common';
import useCurrentInstance from '@/utils/useCurrentInstance';
import { onMounted, ref, reactive } from 'vue';
const { proxy } = useCurrentInstance();

// 打开状态
const open = ref(false);
// 搜索表单数据
let searchFormData = reactive<FormModelType>({
	pageSize: 10,
	pageNum: 1,
	orderByColumn: 'startTime',
	isAsc: 'desc',
});
// 列表配置
let tableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: 'sessionId',
			prop: 'sessionid',
			showOverFlowToolTip: true,
		},
		{
			label: '请求IP:端口',
			prop: '',
			formatter: (row: any) => {
				return row.requestIpStr + ':' + row.requestPort;
			},
		},
		{
			label: '响应IP:端口',
			prop: '',
			formatter: (row: any) => {
				return row.responseIpStr + ':' + row.responsePort;
			},
		},
		{
			label: '请求开始时间',
			prop: 'startTime',
			sortable: true,
		},
		{
			label: '响应结束时间',
			prop: 'endTime',
			sortable: true,
		},
		{
			label: '操作',
			prop: '',
			width: 200,
			operation: [
				{
					text: '包体详情',
					handler: (scope: any) => handlerCheck(scope.row.id),
				},
				{
					text: '删除',
					permi: ['resource:extendData:delete'],
					handler: (scope: any) => handlerDeleteSingle(scope.row.id),
				},
				{
					text: '下载样包',
					permi: ['resource:extendData:download'],
					handler: (scope: any) => handlerDownload(scope.row.id),
				},
			],
		},
	],
	// 工具栏
	toolBar: [
		{ name: '删除', icon: 'yd-icon-delete', disable: 'multiple', permi: ['resource:extendData:delete'], handler: () => handlerDelete() },
		{ name: '打包下载', icon: 'yd-icon-export', disable: 'multiple', permi: ['resource:extendData:download'], handler: () => handlerDownload() },
		{ name: '包体正则表达式校验', icon: 'search', disable: 'single', handler: () => handlerCheck() },
	],
	// 开启复选框
	enableSelection: true,
	// 开启分页
	pagination: {
		pageNum: 1,
	},
	// 加载层
	loading: true,
});
// 列表数据
let tableData = reactive({
	data: [],
});
// 包体详情弹出层打开状态
const detailOpen = ref(false);
// 正则表达式
const matching = ref('');
// java校验结果
const javaCheckRes = ref('');
// 探针校验结果
const probeCheckRes = ref('');
// 匹配数
const matchingCount = ref(0);
// 包体信息
const detailData = ref('');
// 选择的行数据ids
const selectedIds = ref();
// 选择的行数据
const selected = ref();

// 打开窗口
function openDialog(resourceCode?: string) {
	if (!resourceCode || resourceCode === '') {
		return;
	}
	searchFormData.resourceCode = resourceCode;
	open.value = true;
	handlerQuery();
}
/**
 * 选择行数据
 */
function handlerSelectionChange(selects: any) {
	selectedIds.value = selects.map((item: any) => item.id);
	selected.value = selects;
}
/**
 * 搜索
 */
function handlerQuery() {
	tableConfig.loading = true;
	list(searchFormData).then((res: ApiResponse) => {
		tableConfig.loading = false;
		if (res.code !== 0) {
			return;
		}
		if (res.data !== null) {
			tableData.data = res.data.data;
			tableConfig.pagination!.total = res.data.total;
		}
	});
}
/**
 * 删除
 */
function handlerDelete() {
	proxy.$modal
		.confirm('是否确认删除所选项?', '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
		.then(() => {
			// 调用接口
			return remove(selectedIds.value);
		})
		.then(() => {
			// 刷新列表 计算是否要查询上一页的数据
			if (tableConfig.pagination!.total && searchFormData.pageSize) {
				// 删除后的总条数
				let totalCount = tableConfig.pagination!.total - selectedIds.value.length;
				// 计算删除后的总页数
				let totalPage = Math.ceil(totalCount / searchFormData.pageSize);
				// 如果删除后的总页数小于1, 置为1
				totalPage = totalPage < 1 ? 1 : totalPage;
				// 判断删除前的页数是否大于删除后的总页数, 计算当前页应该是多少赋值给查询表单
				searchFormData.pageNum = tableConfig.pagination!.pageNum > totalPage ? totalPage : searchFormData.pageNum;
			} else {
				searchFormData.pageNum = 1;
			}
			handlerQuery();
			// 提示
			proxy.$modal.msgSuccess('删除成功！');
		});
}
// 单个删除
function handlerDeleteSingle(id: any) {
	proxy.$modal
		.confirm('是否确认删除?', '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
		.then(() => {
			// 调用接口
			return remove(id);
		})
		.then(() => {
			// 刷新列表
			searchFormData.pageNum = 1;
			handlerQuery();
			// 提示
			proxy.$modal.msgSuccess('删除成功！');
		})
		.catch(function () {});
}
// 重写下载方法
function handlerDownload(id?: any) {
	const ids = id || selectedIds.value;
	if (!ids || ids === '') {
		return;
	}
	download(ids).then((res) => {
		downloadFromBlob(res, '', '原始数据包' + '_' + parseTime(new Date(), '{y}{m}{d}{h}{i}{s}') + '.zip').then((o) => {
			if (!o.flag) {
				proxy.$modal.msgWarning(o.msg);
			}
		});
	});
}
// 包体正则表达式校验
function handlerCheck(tempId?: any) {
	const id = tempId || selectedIds.value[0];
	queryById(id).then((res) => {
		detailData.value = '请求包体:\n' + res.data.requestBody + '\n响应包体:\n' + res.data.responseBody;
		detailOpen.value = true;
	});
}
// 校验搜索
function checkSearch() {
	if (matching.value === '') {
		matchingCount.value = 0;
		return;
	}
	const reg = new RegExp(matching.value, 'g');
	const r = detailData.value.match(reg);
	if (r) {
		matchingCount.value = r.length;
	} else {
		matchingCount.value = 0;
	}
}
// Java校验
function javaCheck() {
	if (matching.value === '') {
		javaCheckRes.value = '';
		return;
	}
	const reg = new RegExp(matching.value, 'g');
	const r = detailData.value.match(reg);
	if (r) {
		javaCheckRes.value = '当前共查询到匹配值' + r.length + '个\n匹配结果:\n';
		r.forEach((s) => {
			javaCheckRes.value += s + '\n';
		});
	} else {
		javaCheckRes.value = '';
	}
}
// 探针校验
function probeCheck() {
	if (matching.value === '') {
		probeCheckRes.value = '';
		return;
	}
	const reg = new RegExp(matching.value, 'g');
	const r = detailData.value.match(reg);
	if (r) {
		probeCheckRes.value = '当前共查询到匹配值' + r.length + '个\n匹配结果:\n';
		r.forEach((s) => {
			probeCheckRes.value += s + '\n';
		});
	} else {
		probeCheckRes.value = '';
	}
}
defineExpose({
	openDialog,
});
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>
